<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      #app{
        margin: auto;
        width: 600px;
        border: 1px solid #eee;
        padding: 10px;
      }
      ul li{
        list-style: none;
        border-bottom: 1px solid #eee;
        padding: 10px;
      }
      ul.flt{
        overflow: hidden;
      }
      ul.flt li{
        float: left;
        width: 100px;
        margin: 5px;
        border: 1px solid #eee;
      }
    </style>
</head>
<body>
    <div id="app">
      <div class="heade">
        <button @click='fn(0)'>列表视图</button>
        <button @click='fn(1)'>网格视图</button>
        <input type="text" v-model='word'>
      </div>
      <ul class="list" :class="{flt:type==1}">
        <li v-for='item in showlist' :key='item.id'>{{item}}</li>
      </ul>
        
    </div>
</body>
</html>
<!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            word:'',
            type:0,
            list:["test1.txt","test2.txt","test3.txt","test4.txt","testtest5.txt"]
        },
        computed: {
          showlist(){
            let t = this.word;
            let reg = new RegExp(t);
            return this.list.filter(item=>reg.test(item))
          }
        },
        methods: {
          fn(n){
            this.type = n
          }
        },
    });
</script>